<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <video id="video" width="640" height="480" autoplay></video>
    <button id="snap">点击拍照</button>
    <canvas id="canvas" width="640" height="480"></canvas>
    <script>
        console.log(navigator)
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var video = document.getElementById('video');
        var audio = document.getElementById('audio');
        // Trigger photo take
        document.getElementById("snap").addEventListener("click", function () {
            context.drawImage(video, 0, 0, 640, 480);
        });
        window.URL = (window.URL || window.webkitURL || window.mozURL || window.msURL);
        // Get access to the camera!
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then(function (stream) {
                console.log(stream);
                if ("srcObject" in video) {
                    video.srcObject = stream
                    console.log(video.srcObject)
                    // console.log(window.URL.createObjectURL(stream))

                } else {
                    video.src = window.URL && window.URL.createObjectURL(stream);
                    console.log(window.URL.createObjectURL(stream))
                }
                video.play();
            });
        }
    </script>
</body>

</html>
